<script setup lang="ts">
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import type { Router } from "vue-router";
import { Dialog, Toast } from "vant";
import { tools } from "@/constants";
import useUserStore from "@/pinia/modules/userStore/userStore.ts";


const useStore = useUserStore();
const router: Router = useRouter();
const { userMessage } = storeToRefs(useStore);


const logout = async () => {
   const confirm= await Dialog.confirm({ title: "提示", message: "确定退出登录吗" }).catch(error => error);
   if (confirm === "cancel") return;
   const logoutResult = await useStore.logout();
   Toast.success(logoutResult);
   router.push("/login");
};

onMounted(() => {
   useStore.fetchUserMessage();
});

</script>

<template>
   <div class="user-page">
      <div class="user-page-head">
         <div class="top">
            <van-image round fit="cover" :src="userMessage.avatar" />
            <div class="name">
               <p>{{ userMessage.account }}</p>
               <p>
                  <van-icon name="edit"></van-icon>
               </p>
            </div>
         </div>
         <van-row>
            <van-col span="6">
               <p>{{ userMessage.collectionNumber }}</p>
               <p>收藏</p>
            </van-col>
            <van-col span="6">
               <p>{{ userMessage.likeNumber }}</p>
               <p>关注</p>
            </van-col>
            <van-col span="6">
               <p>{{ userMessage.score }}</p>
               <p>积分</p>
            </van-col>
            <van-col span="6">
               <p>{{ userMessage.couponNumber }}</p>
               <p>优惠券</p>
            </van-col>
         </van-row>
      </div>
      <div class="user-page-order">
         <div class="head">
            <h3>药品订单</h3>
            <router-link to="/">
               <span>全部订单</span>
               <van-icon name="arrow" />
            </router-link>
         </div>
         <van-row>
            <van-col span="6">
               <van-badge :content="userMessage.orderInfo?.paidNumber">
                  <svg-icon svg-name="paid" width="30px" height="30px"></svg-icon>
                  <p>待付款</p>
               </van-badge>
            </van-col>
            <van-col span="6">
               <van-badge :content="userMessage.orderInfo?.receivedNumber">
                  <svg-icon svg-name="shipped" width="30px" height="30px"></svg-icon>
                  <p>待发货</p>
               </van-badge>
            </van-col>
            <van-col span="6">
               <van-badge :content="userMessage.orderInfo?.shippedNumber">
                  <svg-icon svg-name="received" width="30px" height="30px"></svg-icon>
                  <p>待收货</p>
               </van-badge>
            </van-col>
            <van-col span="6">
               <van-badge :content="userMessage.orderInfo?.finishedNumber">
                  <svg-icon svg-name="finished" width="30px" height="30px"></svg-icon>
                  <p>已完成</p>
               </van-badge>
            </van-col>
         </van-row>
      </div>
      <div class="user-page-group">
         <h3>快捷工具</h3>
         <van-cell v-for="(item, index) in tools" :key="item.label" :title="item.label" :to="item.path" is-link :border="false">
            <template #icon>
               <svg-icon :svg-name="`tool-0${index + 1}`"></svg-icon>
            </template>
         </van-cell>
      </div>
      <a class="logout" @click="logout">退出登录</a>
   </div>
</template>

<style lang="scss" scoped>
.user-page {
   background-color: var(--cp-bg);
   min-height: calc(100vh - 50px);
   padding: 0 15px 65px;

   &-head {
      height: 200px;
      background: linear-gradient(180deg, rgba(44, 181, 165, 0.46), rgba(44, 181, 165, 0));
      margin: 0 -15px;
      padding: 0 15px;

      .top {
         display: flex;
         padding-top: 50px;
         align-items: center;

         .van-image {
            width: 70px;
            height: 70px;
         }

         .name {
            padding-left: 10px;

            p {
               &:first-child {
                  font-size: 18px;
                  font-weight: 500;
               }

               &:last-child {
                  margin-top: 10px;
                  color: var(--cp-primary);
                  font-size: 16px;
               }
            }
         }
      }

      .van-row {
         margin: 0 -15px;
         padding-top: 15px;

         p {
            text-align: center;

            &:first-child {
               font-size: 18px;
               font-weight: 500;
            }

            &:last-child {
               color: var(--cp-dark);
               font-size: 12px;
               padding-top: 4px;
            }
         }
      }
   }

   &-order {
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 15px;
      padding-bottom: 15px;

      .head {
         display: flex;
         justify-content: space-between;
         line-height: 50px;
         padding: 0 15px;

         a {
            color: var(--cp-tip);
         }
      }

      .van-col {
         text-align: center;

         .cp-icon {
            font-size: 28px;
         }

         p {
            font-size: 12px;
            padding-top: 4px;
         }
      }
   }

   &-group {
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;

      h3 {
         padding-left: 16px;
         line-height: 44px;
      }

      .van-cell {
         align-items: center;
      }

      .cp-icon {
         font-size: 17px;
         margin-right: 10px;
      }
   }

   .logout {
      display: block;
      margin: 20px auto;
      width: 100px;
      text-align: center;
      color: var(--cp-price);
   }
}
</style>
